<template>
	<div class="mobile">
		<div class="nav-top">
			<div class="left">
				<router-link to="/portal/netm"><img src="../../../assets/img/phone-back.png" alt=""></router-link>
			</div>
			<div class="right">
				<span></span>
				<img src="../../../assets/img/phone-more.png" alt="">
			</div>
		</div>
		<div class="inner-banner">
			<div class="badge">
				<img src="../../../assets/img/phone-badge.png" alt="">
			</div>
			<h3>东西湖人民代表大会常务委员会</h3>
		</div>
		<div class="site">
			<div class="site-nav">
				<div class="nav">
					<div class="left">
						<img src="../../../assets/img/net2.png" alt="">
					</div>
					<div class="right">
						<div class="name">联絡站</div>
						<div class="num">93</div>
					</div>
				</div>
				<div class="nav">
					<div class="left">
						<img src="../../../assets/img/net1.png" alt="">
					</div>
					<div class="right">
						<div class="name">驻站代表</div>
						<div class="num">219</div>
					</div>
				</div>
			</div>
			<div class="title">
				<div class="line"></div>网上联络站分布概况
			</div>
			<div class="map">
				<div ref="chart" style="width:100%;height:250px;" />
			</div>
			<!-- <div class="title">
				<div class="line"></div>代表履职
				<div class="more">
					更多<span>></span>
				</div>
			</div>
			<div class="list">
				<div class="item">
					<div class="left"><img src="../../../assets/img/phone-pic.png" alt=""></div>
					<div class="right">
						<div class="name">王余君代表履职风采</div>
						<div class="gray">区人大代表</div>
						<div class="gray">职务：科室主任</div>
					</div>
				</div>
				<div class="item">
					<div class="left"><img src="../../../assets/img/phone-pic.png" alt=""></div>
					<div class="right">
						<div class="name">王余君代表履职风采</div>
						<div class="gray">区人大代表</div>
						<div class="gray">职务：科室主任</div>
					</div>
				</div>
				<div class="item">
					<div class="left"><img src="../../../assets/img/phone-pic.png" alt=""></div>
					<div class="right">
						<div class="name">王余君代表履职风采</div>
						<div class="gray">区人大代表</div>
						<div class="gray">职务：科室主任</div>
					</div>
				</div>
				<div class="item">
					<div class="left"><img src="../../../assets/img/phone-pic.png" alt=""></div>
					<div class="right">
						<div class="name">王余君代表履职风采</div>
						<div class="gray">区人大代表</div>
						<div class="gray">职务：科室主任</div>
					</div>
				</div>
			</div> -->
		</div>
	</div>
</template>

<script>
import Header from '@/components/Header';
import Contact from '@/components/Contact';
import * as echarts from 'echarts';
import dongxihu from '@/assets/geo/dongxihu.json';

export default {
	data() {
		return {
			List: []
		}
	},
	components: {

	},
	created() {

	},
	mounted() {
		const myChart = echarts.init(this.$refs.chart);
		echarts.registerMap("dongxihu", dongxihu);
		const option = {
			series: [
				{
					type: "map",       // 设置图表类型为地图
					map: "dongxihu",     // 地图要加载的JSON文件
					zoom: 0.7,        // 地图缩放大小，这个根据自己需求，默认是1，不缩放
					layoutCenter: ["50%", "50%"],   //  定义地图中心在屏幕中的位置
					// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
					layoutSize: 450,
					aspectScale: 0.9, // 长宽比
					roam: false,
					itemStyle: {       // 这里就是设置item 的样式，也就是地图中每个区块的样式（区块就是JSON文件中包含经纬度信息的对象，获取的地图JSON文件中应该有一个数组，其中的每一个对象就对应一个区块）
						normal: {        // 区块的基本样式
							borderColor: "#fff",   // 区块的边界（边框）颜色
							borderWidth: 2,           // 区块的边界（边框）宽度
							label: {
								show: true,
								textStyle: {
									color: "#333",
									fontSize: "12px"
								}
							},
							areaColor: '#c2dfed',

						},
						emphasis: {         // 区块高亮时的样式（鼠标移入的时候可以选中进行高亮显示）
							areaColor: '#e7a672'
						},
					},
					data: [
						{ name: '径河街道', id: 'e371a828070048b7b07e476dfc058702' },
						{ name: '长青街道', id: 'e371a828070048b7b07e476dfc058702' },
						{ name: '东山街道', id: '34eb416b4ce14925bd17710504931f18' },
						{ name: '走马岭街道', id: 'e371a828070048b7b07e476dfc058702' },
						{ name: '金银湖街道', id: 'a7a5c68750cb4d4494ac2300b1c98538' },
						{ name: '慈惠街道', id: '9f946a9f8b0348ae9d31ce54017a7d7d' },
						{ name: '常青花园街道', id: '8f80d09a33a244a2931b511c51874ac7' },
						{ name: '将军路街道', id: '6ea7835696914558ba685fc0a7985d04' },
						{ name: '柏泉街道', id: '2ed90557e973475b83fc1aa20a7b0e26' },
						{ name: '吴家山街道', id: '69dc6b34607a4538b09c9848859fc699' },
						{ name: '新沟镇街道', id: '597efcd05cce41a1aa60196603d33625' },
						{ name: '辛安渡街道', id: '36b0cb224f5846a0a84c55b55b268ed6' }
					]
				},
			],
		};
		myChart.setOption(option);
		// 监听点击事件
		myChart.on('click', (params) => {
			this.$router.replace({ path: '/portal/net/siteDetailm' + '?id=' + params.data.id })
		});
	},
	methods: {

	}

};
</script>

<style scoped lang="scss"></style>